<template>
  <!-- <svg width="10" height="12" viewBox="0 0 10 12" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M5.00049 2.66663L5.00049 11.3334" stroke="#0E0E0E" stroke-width="2.08134" stroke-linejoin="round"/>
            <path d="M0.999849 6.00012C2.56198 4.438 3.4378 3.56217 4.99992 2.00005L9 6.00012" stroke="#0E0E0E" stroke-width="2.08134" stroke-linejoin="round"/>
            </svg> -->
  <ScrollArea :bot-margin="50">
    <table  style="width: 100%">
      <thead>
        <tr class="row list-header" style="flex-wrap: nowrap;">
          <th>
            <div @mouseover="headerarry.shorttype = true"
              @mouseleave="headerarry.shorttype = false"
              @click="typestatusbtn(0)"
              style="cursor: pointer;text-align: center;" class="col-3 headerjolist">
            Short Description
            <svg style="position: absolute;margin-top: 5px;margin-left:5px;" v-if="headerarry.shorttype == true&&headerarry.shortstatus==false" width="10" height="11" viewBox="0 0 10 11" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M4.99951 8.66687L4.99951 4.98694e-05" stroke="#0E0E0E" stroke-width="2.08134" stroke-linejoin="round"/>
              <path d="M9.00015 5.33338C7.43802 6.8955 6.5622 7.77132 5.00007 9.33345L1 5.33337" stroke="#0E0E0E" stroke-width="2.08134" stroke-linejoin="round"/>
            </svg>
            <svg style="position: absolute;margin-top: 5px;margin-left:5px;" v-if="headerarry.shorttype == true&&headerarry.shortstatus==null" width="10" height="11" viewBox="0 0 10 11" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M4.99951 8.66687L4.99951 4.98694e-05" stroke="#0E0E0E" stroke-width="2.08134" stroke-linejoin="round"/>
              <path d="M9.00015 5.33338C7.43802 6.8955 6.5622 7.77132 5.00007 9.33345L1 5.33337" stroke="#0E0E0E" stroke-width="2.08134" stroke-linejoin="round"/>
            </svg>
            <svg style="position: absolute;margin-top: 5px;margin-left:5px;" v-if="headerarry.shorttype == true&&headerarry.shortstatus==true" width="10" height="12" viewBox="0 0 10 12" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M5.00049 2.66663L5.00049 11.3334" stroke="#0E0E0E" stroke-width="2.08134" stroke-linejoin="round"/>
              <path d="M0.999849 6.00012C2.56198 4.438 3.4378 3.56217 4.99992 2.00005L9 6.00012" stroke="#0E0E0E" stroke-width="2.08134" stroke-linejoin="round"/>
            </svg>
            </div>
            <q-input
            borderless
            label="Short Description"
            dense
            v-model="querydescription"
            filled
            >
              <template v-slot:default>
                <q-icon name="search" />
              </template>
            </q-input>
          </th>
          <th>
            <div @mouseover="headerarry.numbertype = true"
              @mouseleave="headerarry.numbertype = false"
              @click="typestatusbtn(1)"
              style="cursor: pointer;text-align: center;" class="col-3 headerjolist">
              Serial Number
            <svg style="position: absolute;margin-top: 5px;margin-left:5px;" v-if="headerarry.numbertype == true&&headerarry.numberstatus==false" width="10" height="11" viewBox="0 0 10 11" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M4.99951 8.66687L4.99951 4.98694e-05" stroke="#0E0E0E" stroke-width="2.08134" stroke-linejoin="round"/>
              <path d="M9.00015 5.33338C7.43802 6.8955 6.5622 7.77132 5.00007 9.33345L1 5.33337" stroke="#0E0E0E" stroke-width="2.08134" stroke-linejoin="round"/>
            </svg>
            <svg style="position: absolute;margin-top: 5px;margin-left:5px;" v-if="headerarry.numbertype == true&&headerarry.numberstatus==null" width="10" height="11" viewBox="0 0 10 11" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M4.99951 8.66687L4.99951 4.98694e-05" stroke="#0E0E0E" stroke-width="2.08134" stroke-linejoin="round"/>
              <path d="M9.00015 5.33338C7.43802 6.8955 6.5622 7.77132 5.00007 9.33345L1 5.33337" stroke="#0E0E0E" stroke-width="2.08134" stroke-linejoin="round"/>
            </svg>
            <svg style="position: absolute;margin-top: 5px;margin-left:5px;" v-if="headerarry.numbertype == true&&headerarry.numberstatus==true" width="10" height="12" viewBox="0 0 10 12" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M5.00049 2.66663L5.00049 11.3334" stroke="#0E0E0E" stroke-width="2.08134" stroke-linejoin="round"/>
              <path d="M0.999849 6.00012C2.56198 4.438 3.4378 3.56217 4.99992 2.00005L9 6.00012" stroke="#0E0E0E" stroke-width="2.08134" stroke-linejoin="round"/>
            </svg>
          </div>
            <q-input
            borderless
            label="Serial Number"
            dense
            v-model="queryserial_no"
            filled
            >
              <template v-slot:default>
                <q-icon name="search" />
              </template>
            </q-input></th>
          <th>
            <div @mouseover="headerarry.mtcetype = true"
              @mouseleave="headerarry.mtcetype = false"
              @click="typestatusbtn(2)"
              style="cursor: pointer;text-align: center;" class="col-2 headerjolist">
              M'tce Type
              <svg style="position: absolute;margin-top: 5px;margin-left:5px;" v-if="headerarry.mtcetype == true&&headerarry.mtcestatus==false" width="10" height="11" viewBox="0 0 10 11" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M4.99951 8.66687L4.99951 4.98694e-05" stroke="#0E0E0E" stroke-width="2.08134" stroke-linejoin="round"/>
              <path d="M9.00015 5.33338C7.43802 6.8955 6.5622 7.77132 5.00007 9.33345L1 5.33337" stroke="#0E0E0E" stroke-width="2.08134" stroke-linejoin="round"/>
            </svg>
            <svg style="position: absolute;margin-top: 5px;margin-left:5px;" v-if="headerarry.mtcetype == true&&headerarry.mtcestatus==null" width="10" height="11" viewBox="0 0 10 11" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M4.99951 8.66687L4.99951 4.98694e-05" stroke="#0E0E0E" stroke-width="2.08134" stroke-linejoin="round"/>
              <path d="M9.00015 5.33338C7.43802 6.8955 6.5622 7.77132 5.00007 9.33345L1 5.33337" stroke="#0E0E0E" stroke-width="2.08134" stroke-linejoin="round"/>
            </svg>
            <svg style="position: absolute;margin-top: 5px;margin-left:5px;" v-if="headerarry.mtcetype == true&&headerarry.mtcestatus==true" width="10" height="12" viewBox="0 0 10 12" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M5.00049 2.66663L5.00049 11.3334" stroke="#0E0E0E" stroke-width="2.08134" stroke-linejoin="round"/>
              <path d="M0.999849 6.00012C2.56198 4.438 3.4378 3.56217 4.99992 2.00005L9 6.00012" stroke="#0E0E0E" stroke-width="2.08134" stroke-linejoin="round"/>
            </svg>
            </div><q-input
            borderless
            label="M'tce Type"
            dense
            v-model="querymtce_type"
            filled
            >
              <template v-slot:default>
                <q-icon name="search" />
              </template>
            </q-input></th>
          <th>
            <div @mouseover="headerarry.statustype = true"
              @mouseleave="headerarry.statustype = false"
              @click="typestatusbtn(3)"
              style="cursor: pointer;text-align: center;" class="col-2 headerjolist">
              Status
              <svg style="position: absolute;margin-top: 5px;margin-left:5px;" v-if="headerarry.statustype == true&&headerarry.statusstatus==false" width="10" height="11" viewBox="0 0 10 11" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M4.99951 8.66687L4.99951 4.98694e-05" stroke="#0E0E0E" stroke-width="2.08134" stroke-linejoin="round"/>
              <path d="M9.00015 5.33338C7.43802 6.8955 6.5622 7.77132 5.00007 9.33345L1 5.33337" stroke="#0E0E0E" stroke-width="2.08134" stroke-linejoin="round"/>
            </svg>
            <svg style="position: absolute;margin-top: 5px;margin-left:5px;" v-if="headerarry.statustype == true&&headerarry.statusstatus==null" width="10" height="11" viewBox="0 0 10 11" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M4.99951 8.66687L4.99951 4.98694e-05" stroke="#0E0E0E" stroke-width="2.08134" stroke-linejoin="round"/>
              <path d="M9.00015 5.33338C7.43802 6.8955 6.5622 7.77132 5.00007 9.33345L1 5.33337" stroke="#0E0E0E" stroke-width="2.08134" stroke-linejoin="round"/>
            </svg>
            <svg style="position: absolute;margin-top: 5px;margin-left:5px;" v-if="headerarry.statustype == true&&headerarry.statusstatus==true" width="10" height="12" viewBox="0 0 10 12" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M5.00049 2.66663L5.00049 11.3334" stroke="#0E0E0E" stroke-width="2.08134" stroke-linejoin="round"/>
              <path d="M0.999849 6.00012C2.56198 4.438 3.4378 3.56217 4.99992 2.00005L9 6.00012" stroke="#0E0E0E" stroke-width="2.08134" stroke-linejoin="round"/>
            </svg>
            </div><q-input
            borderless
            label="Status"
            dense
            v-model="querystatus"
            filled
            >
              <template v-slot:default>
                <q-icon name="search" />
              </template>
            </q-input></th>
          <th><div @mouseover="headerarry.checktype = true"
              @mouseleave="headerarry.checktype = false" 
              @click="typestatusbtn(4)"
              style="cursor: pointer;text-align: center;" class="col-2 headerjolist">
            Check In
            <svg style="position: absolute;margin-top: 5px;margin-left:5px;" v-if="headerarry.checktype == true&&headerarry.checkstatus==false" width="10" height="11" viewBox="0 0 10 11" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M4.99951 8.66687L4.99951 4.98694e-05" stroke="#0E0E0E" stroke-width="2.08134" stroke-linejoin="round"/>
              <path d="M9.00015 5.33338C7.43802 6.8955 6.5622 7.77132 5.00007 9.33345L1 5.33337" stroke="#0E0E0E" stroke-width="2.08134" stroke-linejoin="round"/>
            </svg>
            <svg style="position: absolute;margin-top: 5px;margin-left:5px;" v-if="headerarry.checktype == true&&headerarry.checkstatus==null" width="10" height="11" viewBox="0 0 10 11" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M4.99951 8.66687L4.99951 4.98694e-05" stroke="#0E0E0E" stroke-width="2.08134" stroke-linejoin="round"/>
              <path d="M9.00015 5.33338C7.43802 6.8955 6.5622 7.77132 5.00007 9.33345L1 5.33337" stroke="#0E0E0E" stroke-width="2.08134" stroke-linejoin="round"/>
            </svg>
            <svg style="position: absolute;margin-top: 5px;margin-left:5px;" v-if="headerarry.checktype == true&&headerarry.checkstatus==true" width="10" height="12" viewBox="0 0 10 12" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M5.00049 2.66663L5.00049 11.3334" stroke="#0E0E0E" stroke-width="2.08134" stroke-linejoin="round"/>
              <path d="M0.999849 6.00012C2.56198 4.438 3.4378 3.56217 4.99992 2.00005L9 6.00012" stroke="#0E0E0E" stroke-width="2.08134" stroke-linejoin="round"/>
            </svg>
          </div>
          <q-input
            borderless
            label="Status"
            dense
            v-model="querystatus"
            style="visibility: hidden;"
            filled
            >
              <template v-slot:default>
                <q-icon name="search" />
              </template>
          </q-input>
        </th>
        </tr>
      </thead>
      <tbody>
        <tr
          v-for="(item, index) in arr"
          :key="index"
          class="list-item cursor-pointer row"
          @click="goMaintenance(item.repair_order.id)"
        >
          <td class="col-3 word-wrap" >
            {{ item.description }}
          </td>
          <td class="col-3 word-wrap" >
            {{ item.serial_no }}
          </td>
          <td class="col-2 word-wrap" >
            {{ item.repair_order.mtce_type }}
          </td>
          <td class="col-2 word-wrap" >
            {{ item.repair_order.status }}
          </td>
          <td class="col-2 word-wrap" >
            {{ formatDateTimeString(item.repair_order.check_in) }}
          </td>
        </tr>
      </tbody>
    </table>
  </ScrollArea>
  <!--   <q-card-actions align="center" class="action col-12">
        <q-btn class="grey-btn" @click="checkinSuccess">Next</q-btn>
  </q-card-actions> -->
</template>

<script setup lang="ts">
import { computed, ref,watch } from 'vue';
import ScrollArea from 'src/components/ScrollArea.vue';
import { formatDateTimeString } from 'src/utils/dateUtils';
import { useRouter } from 'vue-router';
import { useMaintenanceOrder } from 'src/stores/maintenanceOrderStore';
import { Parts, RepairOrder } from 'src/services/type';

type DataRow = {
  id: number;
  description:string;
  stock_code: string;
  serial_no: string;
  repair_order: RepairOrder;
};
const headerarry=ref({
   shorttype:false,
  numbertype:false,
    mtcetype:false,
  statustype:false,
   checktype:false,
 shortstatus:null,
numberstatus:null,
  mtcestatus:null,
statusstatus:null,
 checkstatus:null,
})
const props = defineProps<{
  page?: string;
  data?: DataRow[];
}>();
const querydescription=ref("")
const queryserial_no=ref("")
const querymtce_type=ref("")
const querystatus=ref("")
const router = useRouter();
const arr = ref(props.data)
function typestatusbtn(item){
  if(item==0){
    if(headerarry.value.shortstatus==null){
      headerarry.value.shortstatus=false
      arr.value= props.data.slice().sort((a, b) => {
        var stringA = a.description.toUpperCase(); 
        var stringB = b.description.toUpperCase(); 
        if (stringA < stringB) {
          return -1;
        }
        if (stringA > stringB) {
          return 1;
        }
        return 0;
      });
    }else if(headerarry.value.shortstatus==false){
      headerarry.value.shortstatus=true
      arr.value= props.data.slice().sort((a, b) => {
        var stringA = a.description.toUpperCase(); 
        var stringB = b.description.toUpperCase(); 
        if (stringA > stringB) {
          return -1;
        }
        if (stringA < stringB) {
          return 1;
        }
        return 0;
      });
    }else if(headerarry.value.shortstatus==true){
      arr.value=props.data
      headerarry.value.shortstatus=null
    }
  }
  if(item==1){
    if(headerarry.value.numberstatus==null){
      headerarry.value.numberstatus=false
      arr.value= props.data.slice().sort((a, b) => {
        var stringA = a.serial_no.toUpperCase(); 
        var stringB = b.serial_no.toUpperCase(); 
        if (stringA < stringB) {
          return -1;
        }
        if (stringA > stringB) {
          return 1;
        }
        return 0;
      });
    }else if(headerarry.value.numberstatus==false){
      headerarry.value.numberstatus=true
      arr.value= props.data.slice().sort((a, b) => {
        var stringA = a.serial_no.toUpperCase(); 
        var stringB = b.serial_no.toUpperCase(); 
        if (stringA > stringB) {
          return -1;
        }
        if (stringA < stringB) {
          return 1;
        }
        return 0;
      });
    }else if(headerarry.value.numberstatus==true){
      arr.value=props.data
      headerarry.value.numberstatus=null
    }
  }
  if(item==2){
    if(headerarry.value.mtcestatus==null){
      headerarry.value.mtcestatus=false
      arr.value= props.data.slice().sort((a, b) => {
        var stringA = a.repair_order.mtce_type.toUpperCase(); 
        var stringB = b.repair_order.mtce_type.toUpperCase(); 
        if (stringA < stringB) {
          return -1;
        }
        if (stringA > stringB) {
          return 1;
        }
        return 0;
      });
    }else if(headerarry.value.mtcestatus==false){
      headerarry.value.mtcestatus=true
      arr.value= props.data.slice().sort((a, b) => {
        var stringA = a.repair_order.mtce_type.toUpperCase(); 
        var stringB = b.repair_order.mtce_type.toUpperCase(); 
        if (stringA > stringB) {
          return -1;
        }
        if (stringA < stringB) {
          return 1;
        }
        return 0;
      });
    }else if(headerarry.value.mtcestatus==true){
      arr.value=props.data
      headerarry.value.mtcestatus=null
    }
  }
  if(item==3){
    if(headerarry.value.statusstatus==null){
      headerarry.value.statusstatus=false
      arr.value= props.data.slice().sort((a, b) => {
        var stringA = a.repair_order.status.toUpperCase(); 
        var stringB = b.repair_order.status.toUpperCase(); 
        if (stringA < stringB) {
          return -1;
        }
        if (stringA > stringB) {
          return 1;
        }
        return 0;
      });
    }else if(headerarry.value.statusstatus==false){
      headerarry.value.statusstatus=true
      arr.value= props.data.slice().sort((a, b) => {
        var stringA = a.repair_order.status.toUpperCase(); 
        var stringB = b.repair_order.status.toUpperCase(); 
        if (stringA > stringB) {
          return -1;
        }
        if (stringA < stringB) {
          return 1;
        }
        return 0;
      });
    }else if(headerarry.value.statusstatus==true){
      arr.value=props.data
      headerarry.value.statusstatus=null
    }
  }
  if(item==4){
    if (headerarry.value.checkstatus == null) {
      headerarry.value.checkstatus = false;
      arr.value = props.data.slice().sort((a, b) => {
        var timeA = new Date(a.repair_order.check_in).getTime(); // Convert check_in to timestamp
        var timeB = new Date(b.repair_order.check_in).getTime();
        return timeA - timeB; // Ascending order, for descending order swap timeA and timeB
      });
    }else if(headerarry.value.checkstatus==false){
      headerarry.value.checkstatus=true
      arr.value = props.data.slice().sort((b, a) => {
        var timeA = new Date(a.repair_order.check_in).getTime(); // Convert check_in to timestamp
        var timeB = new Date(b.repair_order.check_in).getTime();
        return timeA - timeB; // Ascending order, for descending order swap timeA and timeB
      });
    }else if(headerarry.value.checkstatus==true){
      arr.value=props.data
      headerarry.value.checkstatus=null
    }
  }
}
function goMaintenance(
  // id: number, stock_code: string, serial_no: string, order_no: string,
  repair_order: number
) {
  router.push(`/maintenance/order/${repair_order}`);

}
watch(querydescription, (newValues, oldValues) => {
  console.log(newValues,oldValues)
  const queryString = newValues.toLowerCase(); // Convert query to lowercase for case-insensitive comparison
  arr.value = props.data.filter(item => item.description.toLowerCase().includes(queryString)).sort((a, b) => {
      var stringA = a.description.toUpperCase();
      var stringB = b.description.toUpperCase();
      if (stringA < stringB) {
        return -1;
      }
      if (stringA > stringB) {
        return 1;
      }
      return 0;
    });
});
watch(queryserial_no, (newValues, oldValues) => {
  const queryString = newValues.toLowerCase(); // Convert query to lowercase for case-insensitive comparison
  arr.value = props.data.filter(item => item.serial_no.toLowerCase().includes(queryString)).sort((a, b) => {
      var stringA = a.serial_no.toUpperCase();
      var stringB = b.serial_no.toUpperCase();
      if (stringA < stringB) {
        return -1;
      }
      if (stringA > stringB) {
        return 1;
      }
      return 0;
    });
});
watch(querymtce_type, (newValues, oldValues) => {
  const queryString = newValues.toLowerCase(); // Convert query to lowercase for case-insensitive comparison
  console.log(queryString,newValues,"SHUJU")
  arr.value = props.data.filter(item => item.repair_order.mtce_type.toLowerCase().includes(queryString)).sort((a, b) => {
      var stringA = a.repair_order.mtce_type.toUpperCase();
      var stringB = b.repair_order.mtce_type.toUpperCase();
      if (stringA < stringB) {
        return -1;
      }
      if (stringA > stringB) {
        return 1;
      }
      return 0;
    });
});
watch(querystatus, (newValues, oldValues) => {
  const queryString = newValues.toLowerCase(); // Convert query to lowercase for case-insensitive comparison
  arr.value = props.data.filter(item => item.repair_order.status.toLowerCase().includes(queryString)).sort((a, b) => {
      var stringA = a.repair_order.status.toUpperCase();
      var stringB = b.repair_order.status.toUpperCase();
      if (stringA < stringB) {
        return -1;
      }
      if (stringA > stringB) {
        return 1;
      }
      return 0;
    });
});
</script>

<style scoped>
table thead {
  position: sticky;
  background-color: #f4f4f4;
  top: 0;
  z-index: 10;
}
th,
td {
  text-align: left;
  padding: 10px;
}
.list-header{
  position: relative;
}
.list-header::after {
  content: '';
  position: absolute;
  bottom: 60%;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: #BEBEBE; /* 下划线颜色，可以根据需要调整 */
}
.headerjolist{
  margin-bottom: 5px;
  white-space: nowrap;
}
</style>
